<script setup>
import { ref,markRaw } from 'vue'
import { deleteTableRow } from '../../../../utils/utils';
import ConfigMapRef from './envFromType/ConfigMapRef.vue'
import SecretRef from './envFromType/SecretRef.vue'
const props = defineProps({
  env: {
    type: Array
  },
  envFrom: {
    type: Array
  },
  containerIndex: {
        type: Number,
    }
})
const activeName = ref('env')
const showAddEnvFromDialog = ref(false)
const envFromResourceType = ref('configMap')
const envFromResourceTypeComp = {
  'configMap': markRaw(ConfigMapRef),
  'secret': markRaw(SecretRef)
}
const addEnv = () => {
  const env = {
    name: '',
    value: '',
  }
  if (props.env == null || props.env == undefined) {props.env = []}
  props.env.unshift(env)
}
const addEnvFrom = () => {
  showAddEnvFromDialog.value = true
}

</script>

<template>
  <el-tabs v-model="activeName" border class="demo-tabs">
    <el-tab-pane label="逐个配置" name="env">
      <el-table
      border
      :data="props.env"
      height="300px"
      >
        <el-table-column align="center" prop="name" label="变量名" width="480">
            <template #default="scope">
                <el-form-item label-width="0" style="margin-bottom: 0px;">
                    <el-input v-model.trim="scope.row.name" placeholder="变量名称"></el-input>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="value" label="变量值">
            <template #default="scope">
                <el-form-item label-width="0" style="margin-bottom: 0px;" v-if="scope.row.hasOwnProperty('value')">
                    <el-input style="width: 100%;" v-model.trim="scope.row.value" placeholder="变量值对应value"/>
                </el-form-item>
                <span v-else>不支持修改该类型的变量</span>
            </template>

        </el-table-column>

        <el-table-column align="center" prop="protocol" label="添加" width="140">
            <template #header>
                <el-button link type="primary" @click="addEnv()">
                    添加
                </el-button>
            </template>
            <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(props.env, scope.$index)">
                    删除
                </el-button>
            </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="批量生成" name="envFrom">
      <el-table
      border
      :data="props.envFrom"
      height="300px"
      >
        <el-table-column align="center" prop="prefix" label="变量前缀" title="变量前缀可以给每个生成的变量加一个前缀" width="360">
            <template #default="scope">
                <el-form-item label-width="0" style="margin-bottom: 0px;">
                    <el-input v-model.trim="scope.row.prefix" placeholder="变量前缀"></el-input>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="类型">
            <template #default="scope">
                <span>{{ scope.row.configMapRef?'configMap':'secret' }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="config" label="变量配置" width="480">
            <template #default="scope">
              <component
              :is="envFromResourceTypeComp[scope.row.configMapRef?'configMap':'secret']"
              :env-from="props.envFrom"
              :env-from-item="scope.row"
              :key="Math.random()"
              method="Update"
              ></component>
            </template>
        </el-table-column>


        <el-table-column align="center" prop="protocol" label="添加" width="140">
            <template #header>
                <el-button link type="primary" @click="addEnvFrom()">
                    添加
                </el-button>
            </template>
            <template #default="scope">
                <el-button link type="warning" @click="deleteTableRow(props.envFrom, scope.$index)">
                    删除
                </el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="showAddEnvFromDialog" :title="('使用'+envFromResourceType+'生成环境变量')" destory-on-close>
        <el-card>
          <template #header>
            <div>
              <div>
                <el-radio-group v-model="envFromResourceType">
                  <el-radio label="configMap" size="large" value="configMap">
                  </el-radio>
                  <el-radio label="secret" size="large" value="secret">
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
          </template>
          <component
          :is="envFromResourceTypeComp[envFromResourceType]"
          :env-from="props.envFrom"
          @closeDialog="()=>{showAddEnvFromDialog=false}"
          >
          </component>
        </el-card>
      </el-dialog>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>
</style>
